<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in lunboList" :key="item.id">
        <!-- v-lazy懒加载,全局配置后才能使用的标签 -->
        <img class="swipe_img" v-lazy="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- gids九宫格 -->
    <van-grid :column-num="3">
      <van-grid-item class="grid_item"
        v-for="item in gidsList"
        :key="item.id"
        :icon="item.src"
        :text="item.title"
        :to="item.to" />
    </van-grid>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data () {
    return {
      lunboList: [],
      gidsList: []
    }
  },
  created () {
    this.getLunbo()
    this.getGids()
  },
  methods: {
    async getLunbo () {
      try {
        const res = await this.$http.getLunbo() // 直接调用已挂载在的全局接口
        this.lunboList = res.data.message
      } catch (error) {
        Toast('网络请求错误...')
      }
    },
    async getGids () {
      try {
        const res = await this.$http.getGids()
        this.gidsList = res.data.message
        console.log(this.gidsList)
      } catch (error) {
        Toast('网络请求错误...')
      }
    }
  }
}
</script>
<style lang="scss">
  .home{
    .my-swipe{
      height: 200px;
      .swipe_img{
        height: 100%;
        width: 100%;
      }
    }
    .grid_item{
      .van-icon__image{
        font-size: 40px;
      }
    }
  }
</style>
